<mat-toolbar>
    <div class="logo">
        <img src="./assets/icons/icon-tv-256.png" height="100" />
    </div>
    <div class="main">
        <div class="title">{{ title }}</div>
        <div class="subtitle">{{ subtitle }}</div>
    </div>
    <div class="menu" *ngIf="isHome">
        <button
            mat-icon-button
            class="add-playlist-btn"
            [matMenuTriggerFor]="addPlaylistMenu"
            [matTooltip]="'HOME.URL_UPLOAD.ADD_PLAYLIST' | translate"
            data-test-id="add-playlist"
        >
            <mat-icon>add</mat-icon>
        </button>
        <!-- <button
        mat-icon-button
        [matTooltip]="'HOME.FILTER_BY_NAME' | translate"
        data-test-id="filter-playlist-by-name"
    >
        <mat-icon>search</mat-icon>
    </button> -->
        <button
            mat-icon-button
            [matMenuTriggerFor]="filterPlaylistMenu"
            [matTooltip]="'HOME.FILTER_BY_TYPE' | translate"
            data-test-id="filter-playlist-by-type"
        >
            <mat-icon>filter_list</mat-icon>
        </button>
        <button
            *ngIf="isElectron; else pwaMenu"
            mat-icon-button
            (click)="openSettings()"
            [matTooltip]="'MENU.SETTINGS' | translate"
            data-test-id="open-settings"
        >
            <mat-icon>settings</mat-icon>
        </button>

        <mat-menu #filterPlaylistMenu="matMenu">
            <section
                (click)="$event.stopPropagation()"
                class="filter-container"
            >
                <h4>{{ 'HOME.FILTER_BY_TYPE' | translate }}:</h4>
                @for (type of playlistTypes; track $index) {
                    <p>
                        <mat-checkbox
                            (click)="$event.stopPropagation()"
                            [checked]="true"
                            (change)="onPlaylistFilterChange()"
                            [(ngModel)]="type.checked"
                            >{{ type.title }}</mat-checkbox
                        >
                    </p>
                }
            </section>
        </mat-menu>

        <mat-menu #addPlaylistMenu="matMenu">
            <button
                mat-menu-item
                [attr.aria-label]="'HOME.TABS.FILE_UPLOAD' | translate"
                (click)="opedAddPlaylistDialog('file')"
            >
                <mat-icon>attach_file</mat-icon>
                <span>{{ 'HOME.TABS.FILE_UPLOAD' | translate }}</span>
            </button>
            <button
                mat-menu-item
                [attr.aria-label]="'HOME.TABS.URL_UPLOAD' | translate"
                (click)="opedAddPlaylistDialog('url')"
            >
                <mat-icon>link</mat-icon>
                <span>{{ 'HOME.TABS.URL_UPLOAD' | translate }}</span>
            </button>

            <button
                mat-menu-item
                [attr.aria-label]="'HOME.TABS.TEXT_IMPORT' | translate"
                (click)="opedAddPlaylistDialog('text')"
            >
                <mat-icon>text_format</mat-icon>
                <span>{{ 'HOME.TABS.TEXT_IMPORT' | translate }}</span>
            </button>
            <mat-divider></mat-divider>
            <button
                mat-menu-item
                [attr.aria-label]="'HOME.TABS.XTREME_IMPORT' | translate"
                (click)="opedAddPlaylistDialog('xtream')"
            >
                <mat-icon>video_library</mat-icon>
                <span>{{ 'HOME.TABS.XTREME_IMPORT' | translate }}</span>
            </button>
            <button
                mat-menu-item
                [attr.aria-label]="
                    'HOME.TABS.STALKER_PORTAL_IMPORT' | translate
                "
                (click)="opedAddPlaylistDialog('stalker')"
            >
                <mat-icon>dashboard</mat-icon>
                <span>{{ 'HOME.TABS.STALKER_PORTAL_IMPORT' | translate }}</span>
            </button>
        </mat-menu>
    </div>
</mat-toolbar>

<ng-template #pwaMenu>
    <button
        mat-icon-button
        [matMenuTriggerFor]="menu"
        [attr.aria-label]="'MENU.OPEN' | translate"
    >
        <mat-icon>menu</mat-icon>
    </button>
    <mat-menu #menu="matMenu">
        <ng-container *ngIf="isHome">
            <button
                mat-menu-item
                [attr.aria-label]="'MENU.SETTINGS_ARIA' | translate"
                (click)="openSettings()"
            >
                <mat-icon>settings</mat-icon>
                <span>{{ 'MENU.SETTINGS' | translate }}</span>
            </button>
            <mat-divider></mat-divider>
        </ng-container>
        <button
            mat-menu-item
            [attr.aria-label]="'MENU.SUPPORT_ARIA' | translate"
            (click)="openUrl('https:///github.com/4gray/iptvnator')"
        >
            <mat-icon>recommend</mat-icon>
            <span>GitHub</span>
        </button>
        <button
            mat-menu-item
            [attr.aria-label]="'MENU.BUG_REPORT' | translate"
            (click)="openUrl('https://github.com/4gray/iptvnator/issues')"
        >
            <mat-icon>bug_report</mat-icon>
            <span>{{ 'MENU.BUG_REPORT' | translate }}</span>
        </button>
        <mat-divider></mat-divider>
        <button
            mat-menu-item
            [attr.aria-label]="'MENU.WHAT_IS_NEW' | translate"
            (click)="setDialogVisibility(true)"
        >
            <mat-icon>new_releases</mat-icon>
            <span>{{ 'MENU.WHAT_IS_NEW' | translate }}</span>
        </button>
        <button
            mat-menu-item
            [attr.aria-label]="'MENU.SUPPORT_PROJECT' | translate"
            (click)="openUrl('https://github.com/sponsors/4gray')"
        >
            <mat-icon>savings</mat-icon>
            <span>{{ 'MENU.SUPPORT_PROJECT' | translate }}</span>
        </button>
        <mat-divider></mat-divider>
        <button
            mat-menu-item
            [attr.aria-label]="'MENU.ABOUT_ARIA' | translate"
            (click)="openAboutDialog()"
        >
            <mat-icon>info</mat-icon>
            <span>{{ 'MENU.ABOUT' | translate }}</span>
        </button>
    </mat-menu>
</ng-template>
<ngx-whats-new
    *ngIf="!isElectron && isDialogVisible$ | async"
    (closeModal)="setDialogVisibility(false)"
    [items]="modals"
    [options]="options"
/>
